<template>
  <div
    id="map"
    class="position-relative"
    style="
      background-color: #2a2a2a;
      overflow: hidden;
      margin: -20px;
      height: calc(100% + 35px);
      width: calc(100% + 35px);
    "
  >
    <el-row :gutter="24" class="rightBox">
      <el-col :span="8" :offset="16">
        <div class="rightBox1">
          <template v-for="(item, index) in productStatisticsList" :key="index">
            <div class="">
              <p class="font-weight font-30">{{ item.number }}</p>
              <p clas="mtop-10">{{ item.name }}</p>
            </div>
          </template>
        </div>
        <div class="rightBox2">
          <template v-for="(item, index) in supplierList" :key="index">
            <div class="">
              <p class="font-weight font-30">{{ item.number }}</p>
              <p clas="mtop-10">{{ item.name }}</p>
            </div>
          </template>
        </div>
        <div class="rightBox3">
          <div class="pd-10 d-flex j-sb">
            <p style="">全设备生命周期统计</p>
          </div>
          <div class="d-flex j-sa">
            <div>
              <p>{{ inServiceCount }}</p>
              <div
                class="g-progress"
                :style="{ '--progress': inServiceCountPer }"
              ></div>
              <p>在役设备</p>
            </div>
            <div>
              <p>{{ notServiceCount }}</p>
              <div
                class="g-progress"
                :style="{ '--progress': notServiceCountPer }"
              ></div>
              <p>非在役设备</p>
            </div>
            <div>
              <p>{{ repairCount }}</p>
              <div
                class="g-progress"
                :style="{ '--progress': repairCountPer }"
              ></div>
              <p>维修设备</p>
            </div>
            <div>
              <p>{{ scrapCount }}</p>
              <div
                class="g-progress"
                :style="{ '--progress': scrapCountPer }"
              ></div>
              <p>报废设备</p>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="footerBox">
      <el-col :span="8">
        <div class="footerBox1">
          <div class="pd-10 d-flex j-sb">
            <p>产品类型统计</p>
          </div>
          <div class="d-flex flex-wrap">
            <template v-for="(item, index) in productTypeList" :key="index">
              <div
                class="d-flex a-center width-50 j-center"
                style="height: 60px"
              >
                <p>
                  <span>{{ item.typeName }}：{{ item.typeNum }}</span
                  >　<span>{{ item.deviceName }}：{{ item.deviceNum }}</span>
                </p>
              </div>
            </template>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="footerBox2">
          <div class="pd-10 d-flex j-sb">
            <p>设备在离线统计</p>
            <p>在线设备：{{ onLineCount }}（台）</p>
          </div>
          <div style="margin-top: 10px">
            <el-progress type="circle" :percentage="onLineRate" :color="colors">
              <template #default="{ percentage }">
                <p>{{ percentage }}%</p>
                <p clas="mtop-10">设备在线率</p>
              </template>
            </el-progress>
          </div>
        </div>
      </el-col>
      <el-col :span="8"
        ><div class="footerBox3">
          <div class="pd-10 d-flex j-sb">
            <p style="">设备激活状态统计</p>
            <p>激活设备：{{ activationCount }}（台）</p>
          </div>
          <div clas="mtop-10">
            <el-progress
              type="circle"
              :percentage="activationRate"
              :color="colors"
            >
              <template #default="{ percentage }">
                <p>{{ percentage }}%</p>
                <p clas="mtop-10">设备激活率</p>
              </template>
            </el-progress>
          </div>
        </div></el-col
      >
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch, onMounted, reactive } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import { Check } from "@element-plus/icons-vue";
import {
  findDeviceAreaStatisticApi,
  findDeviceFileCycleStatisticApi,
  findDeviceStatisticApi,
  findDeviceStatusStatisticApi,
  listProductTypeStatisticApi,
} from "@/api/home";
import { ConsoleSqlOutlined } from "@ant-design/icons-vue";
import { coordinate } from "@/utils/coordinate";
const map = ref(null);
const productStatisticsList = ref([
  { name: "产品类型统计(个)", number: "346" },
  { name: "设备总数统计(台)", number: "56" },
]);

const supplierList = ref([
  { name: "机构数量统计", number: "123" },
  { name: "供应商数量统计", number: "56343" },
]);
const colors = ref([
  { color: "#f56c6c", percentage: 20 },
  { color: "#e6a23c", percentage: 40 },
  { color: "#5cb87a", percentage: 60 },
  { color: "#1989fa", percentage: 80 },
  { color: "#6f7ad3", percentage: 100 },
]);
const inServiceCount = ref(0); //在役设备数
const notServiceCount = ref(0); //非在役设备数据
const repairCount = ref(0); //维修中设备数据
const scrapCount = ref(0); //报废设备数
const inServiceCountPer = ref("0%"); //在役设备率
const notServiceCountPer = ref("0%"); //非在役设备率
const repairCountPer = ref("0%"); //维修中设备率
const scrapCountPer = ref("0%"); //报废设备率

const productTypeList = ref([]) as any; //产品类型统计

const onLineCount = ref(0) as any; // 在线设备数
const activationCount = ref(0) as any; // 激活设备数
const onLineRate = ref(0) as any; // 设备在线率
const activationRate = ref(0) as any; // 设备激活率
const features = ref([]) as any;
onMounted(async () => {
  //设备地区数据统计 设备所属省份，设备总数、在线设备数、离线设备数、设备激活率、在役设备、非在役设备 维修设备 报废设备
  await findDeviceAreaStatisticApi({}).then((data) => {
    if (data.code == 0) {
      let datas = data.data;

      datas?.forEach((res = {} as any, i: any) => {
        const coordinateJson = coordinate.find(
          (f: any) => f.name === res.provinceName
        );
        if (coordinateJson) {
          features.value.push({
            type: "Feature",
            geometry: {
              type: "Point",
              coordinates: coordinateJson.location,
            },
            properties: {
              id: i + 1,
              名称: res.provinceName, //省份地址名称
              地址: res.provinceName, //省份地址名称,
              adcode_n: -1,
              adcode_p: -1,
              adcode_c: -1,
              adcode_d: -1,
              point_status: 0,
              设备总数: res.deviceTotal, //  设备总数
              宽度: res.deviceTotal, //  设备总数
            },
          });
        }
      });
    }
  });
  //生命周期统计 在役 非在役 维修 报废
  findDeviceFileCycleStatisticApi({}).then((data) => {
    if (data.code == 0) {
      //console.log(data.data);
      let datas = data.data;
      inServiceCount.value = datas.inServiceCount; //在役设备数
      notServiceCount.value = datas.notServiceCount; //非在役设备数据
      repairCount.value = datas.repairCount; //维修中设备数据
      scrapCount.value = datas.scrapCount; //报废设备数
      let deviceTotal =
        datas.inServiceCount +
        datas.notServiceCount +
        datas.repairCount +
        datas.scrapCount;
      inServiceCountPer.value =
        Math.round((inServiceCount.value / deviceTotal) * 10000) / 100.0 + "%"; //在役设备率
      notServiceCountPer.value =
        Math.round((notServiceCount.value / deviceTotal) * 10000) / 100.0 + "%"; //非在役设备率
      repairCountPer.value =
        Math.round((repairCount.value / deviceTotal) * 10000) / 100.0 + "%"; //维修中设备率
      scrapCountPer.value =
        Math.round((scrapCount.value / deviceTotal) * 10000) / 100.0 + "%"; //报废设备率
    }
  });
  //统计设备产品个数、设备总数、机构总数、供应商总数
  findDeviceStatisticApi({}).then((data) => {
    if (data.code == 0) {
      let datas = data.data;
      productStatisticsList.value[0].number = datas.productCount; //产品个数
      productStatisticsList.value[1].number = datas.deviceCount; //设备个数
      supplierList.value[0].number = datas.organizationCount; //机构个数
      supplierList.value[1].number = datas.provideCount; //供应商个数
    }
  });
  //设备状态统计 设备总数 在线个数 离线个数 在线率 激活个数 未激活个数 激活率
  findDeviceStatusStatisticApi({}).then((data) => {
    if (data.code == 0) {
      //console.log(data.data);
      let datas = data.data;
      onLineCount.value = datas.onLineCount; // 在线设备数
      activationCount.value = datas.activationCount; // 激活设备数
      onLineRate.value = datas.onLineRate; // 设备在线率
      activationRate.value = datas.activationRate; // 设备激活率
    }
  });
  //产品类型统计(产品类型数量、产品下设备数量)
  listProductTypeStatisticApi({}).then((data) => {
    if (data.code == 0) {
      let datas = data.data;
      datas?.forEach((res = {} as any) => {
        productTypeList.value.push({
          typeName: res.productTypeName + "类", //产品类型名称
          typeNum: res.productCount, //产品总数
          deviceName: "设备数量",
          deviceNum: res.productDeviceCount, //设备总数
        });
      });
    }
  });
  AMapLoader.load({
    key: "9072b65e65cdd79da6631d9664658d08", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本
    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    Loca: {
      // 是否加载 Loca， 缺省不加载
      version: "2.0.0", // Loca 版本，缺省 1.3.2
    },
  })
    .then((AMap) => {
      // //创建地图
      var map = new AMap.Map("map", {
        zoom: 5, //地图显示的缩放级别
        showLabel: false,
        viewMode: "3D",
        center: [105.601, 35.32],
        mapStyle: "amap://styles/dark",
      });
      // 创建 Loca 实例
      var loca = new Loca.Container({
        map: map,
      });
      var pl = (window.pl = new Loca.PointLayer({
        zIndex: 10,
        opacity: 1,
        blend: "normal",
      }));

      var geo = new Loca.GeoJSONSource({
        //geojson 对象
        data: {
          type: "FeatureCollection",
          features: features.value,
        },
        //url: "https://a.amap.com/Loca/static/loca-v2/demos/mock_data/cuisine.json",
      });
      console.log(features.value);
      pl.setSource(geo);
      var colors = [
        "rgba(254,255,198,0.95)",
        "rgba(255,238,149,0.95)",
        "rgba(255,217,99,0.95)",
        "rgba(255,175,43,0.95)",
        "rgba(255,135,24,0.95)",
        "rgba(234,10,0,0.95)",
        "rgba(195,0,0,0.95)",
        "rgba(139,0,0,0.95)",
      ];

      var style = {
        unit: "meter",
        radius: (index: any, f: any) => {
          var n = f.properties["宽度"] * 500;
          n = n > 150000 ? 150000 : n;
          n = n < 50000 ? 50000 : n;
          return n;
        },
        color: (index: any, f: any) => {
          var n = Math.min(7, ~~(f.properties["宽度"] / 1000));
          console.log(n);
          return colors[n];
        },
        borderWidth: 0,
        blurRadius: -1,
      };

      pl.setStyle(style);
      loca.add(pl);
    })
    .catch((e) => {
      console.log(e);
    });
});
</script>
<style scoped>
p {
  margin: 0;
  padding: 0;
  color: white;
}
span {
  font-size: 14px;
}
.footerBox {
  width: 100%;
  height: 200px;
  position: absolute;
  left: 10px;
  bottom: 30px;
  right: 0;
  z-index: 999;
  display: flex;
}
.footerBox1,
.footerBox2,
.footerBox3 {
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.rightBox {
  width: 100%;
  position: absolute;
  top: 0;
  left: 10px;
  right: 0;
  z-index: 999;
}
.rightBox1,
.rightBox2 {
  width: 100%;
  height: 160px;
  margin-bottom: 20px;
  display: flex;
}
.rightBox1,
.rightBox2 {
  justify-content: space-between;
}
.rightBox3 {
  width: 100%;
  height: 160px;
  margin-bottom: 20px;
  height: 200px;
  background: rgba(0, 0, 0, 0.2);
}
.rightBox1 > div,
.rightBox2 > div {
  width: 45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
}

.footerBox1,
.footerBox2,
.footerBox3 {
  background: rgba(0, 0, 0, 0.2);
}

.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}
.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}

@property --progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.g-progress {
  margin: auto;
  width: 20px;
  height: 100px;
  border-radius: 25px 25px 0 0;
  background: linear-gradIEnt(
    0deg,
    #59cdc1,
    #0067e1 var(--progress),
    transparent 0
  );
  border: 1px solID #eee;
  transition: 0.3s --progress;
  margin-bottom: 10px;
}
</style>
